var headerNumber = 1;
var headerMap = {};

function setHeaderModalShow() {
    $("#setHeader").modal('show');
}

function addHeader(key, value, init) {
    var htmlTem =
        '<tr id="headers-' + headerNumber + '">' +
        '    <td><input disabled id="header-checkbox-' + headerNumber + '" type="checkbox" class="i-checks" name="headerSelect"></td>' +
        '    <td><input id="header-key-' + headerNumber + '" type="text" name="header-key-' + headerNumber + '" onkeyup="checkboxRemoveDisabled(\'header-\',\'' + headerNumber + '\')"></td>' +
        '    <td><input id="header-value-' + headerNumber + '" type="text" name="header-value-' + headerNumber + '" onkeyup="checkboxRemoveDisabled(\'header-\',\'' + headerNumber + '\')"></td>' +
        '    <td>' +
        '        <a href="JavaScript:void(0)" style="color: red;font-size: 20px" onclick="delHeader(\'headers-' + headerNumber + '\')">' +
        '            <span class="glyphicon glyphicon-remove"></span>' +
        '        </a>' +
        '    </td>' +
        '</tr>'
    ;
    $("#header").append(htmlTem);
    if (key && value) {
        $("#header-key-" + headerNumber).val(key);
        $("#header-key-" + headerNumber).attr('disabled', true);
        $("#header-value-" + headerNumber).val(value);
        $("#header-value-" + headerNumber).attr('disabled', true);
        $("#header-checkbox-" + headerNumber).iCheck('check');
        $("#header-checkbox-" + headerNumber).iCheck('enable');
    } else if (init) {
        $("#headers-" + headerNumber).remove();
    }
    headerNumber += 1;
    initCheck2header();
}

function delHeader(headerId) {
    $("#" + headerId).remove();
}

function initCheck2header() {
    $(".i-checks").iCheck({
            checkboxClass: "icheckbox_square-green",
            radioClass: "iradio_square-green"
        }
    );
    $("#header .i-checks").on('ifChecked', function (ent) {
        var keyIdFlag = $(this).attr('id').replace('header-checkbox-', 'header-key-');
        var valueIdFlag = $(this).attr('id').replace('header-checkbox-', 'header-value-');
        var key = $('#' + keyIdFlag).val();
        var value = $('#' + valueIdFlag).val();
        if (!(key && value)) {
            alert("key and value is not null!");
        } else {
            $('#' + keyIdFlag).attr('disabled', true);
            $('#' + valueIdFlag).attr('disabled', true);
            headerMap[key] = value;
        }
    });
    $("#header .i-checks").on('ifUnchecked', function (ent) {
        var keyIdFlag = $(this).attr('id').replace('header-checkbox-', 'header-key-');
        var valueIdFlag = $(this).attr('id').replace('header-checkbox-', 'header-value-');
        var key = $('#' + keyIdFlag).val();
        $('#' + keyIdFlag).attr('disabled', false);
        $('#' + valueIdFlag).attr('disabled', false);
        delete headerMap[key];
    })
}